<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Disney</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/01.css">
	<link rel="stylesheet" href="css/iconfont.css">
</head>
<body>
	<div id="black"></div>
<!-- 头部导航 -->
	<div class="center-box">
		<ul class="nav clearfix">
			<li><a href="" style="color: #f00"><i class="iconfont icon-shouye-shouye"></i>首页</a></li>
			<li><a href="store.html"><i class="iconfont icon-gouwucheman"></i>商店</a></li>
			<li><a href="amusement.html"><i class="iconfont icon-luleyuan6259cf"></i>乐园</a></li>
			<li><a href="main.html"><img src="img/t_logo.png" alt=""></a></li>
			<li><a href="movie.html"><i class="iconfont icon-yingshi"></i>影视</a></li>
			<li><a href=""><i class="iconfont icon-shuma"></i>数码</a></li>
			<li><a href=""><i class="iconfont icon-yingyuxuexiao"></i>迪士尼英语</a></li>
		</ul>
	</div>
	
<!-- 滚动大图 -->
	<div class="center-box">
		<div class="banner">
			<a href=""><img src="img/170307160400016253.jpg" alt=""></a>
			<!-- <div class="buy-tickets"></div>
			<div class="see-video"></div> -->
			<ul class="extra">
				<li>
					<img src="img/icon-tickets.png" alt="">
					<a href="http://theater.mtime.com/China_Beijing/movie/195064/">购票</a>
				</li>
				<li>
					<img src="img/icon-video.png" alt="">
					<a href="javascript:void(0)" id="view" onclick="showVid()">
						观看视频						
					</a>
				</li>
			</ul>
		</div>
	</div>

<!-- 主题内容 -->
	<div class="center-box">
		<ul class="contener">
			<li><p>明&nbsp;星</p></li>
			<li>
				<ul class="princess clearfix">
					<li>
						<a href=""><img src="img/151209173849244246.jpg" alt=""><br>
						<span>米奇和他的朋友们</span></a>
					</li>
					<li>
						<a href=""><img src="img/151209173747572402.jpg" alt=""><br>
						<span>迪士尼公主</span></a>
					</li>
					<li>
						<a href=""><img src="img/151130185638114248.jpg" alt=""><br>
						<span>赛车总动员</span></a>
					</li>
					<li>
						<a href=""><img src="img/151130185656630780.jpg" alt=""><br>
						<span>小公主苏菲亚</span></a>
					</li>
					<li>
						<a href=""><img src="img/151130185733287815.jpg" alt=""><br>
						<span>冰雪奇缘</span></a>
					</li>
					<li>
						<a href=""><img src="img/151130185754146838.jpg" alt=""><br>
						<span>星球大战</span></a>
					</li>
				</ul>
			</li>
			<li><p>商&nbsp;店</p></li>
			<li class="clearfix" style="margin-bottom: 60px">
				<div class="img-left fl">
					<a href="javascript:void(0)" onclick="showLable()">
						<img src="img/170222182656789206.jpg" alt="">
					</a>
				</div>
				<div class="img-right fl clearfix">
					<a href="javascript:void(0)" onclick="showLable()"><img src="img/170222175522898755.jpg" alt=""></a>
					<a href="javascript:void(0)" onclick="showLable()"><img src="img/170222175656117282.jpg" alt=""></a><br>
					<a href="javascript:void(0)" onclick="showLable()"><img src="img/170224162126508664.jpg" alt=""></a>
					<a href="javascript:void(0)" onclick="showLable()"><img src="img/170222175807555548.jpg" alt=""></a>
				</div>
			</li>
			<li><p>迪士尼资讯</p></li>
			<li class="clearfix">
				<div class="infor-left fl" style="height: 769px;">
					<a href="son-1.html"><img src="img/170328163658175686.jpg" alt="" class="0-box"></a>
					<div class="infor-left-bottom">
						<a href="son-1.html">优衣库推出迪士尼“米妮爱圆点”系列，现已全国上市！</a>
						<div class="font">复古立体刺绣赋予米妮独一无二的时尚精致，共23款单品甜美来袭。是不是也唤醒了你的少女心呢？
							<div class="circle"></div>
						</div>
					</div>
				</div>
				<div class="infor-right fl">
					<ul class="img-font clearfix 0-box">
						<li>
							<a href="son-2.html"><img src="img/170103101002207225.jpg" alt=""></a>
							<div class="girl-bag">
								<a href="son-2.html">Danielle Nicole全新迪士尼合作系列闪耀亮相</a>
								<div class="girl-bag-font">															手包品牌DanielleNicole推出全新迪士尼合作系列，让你的包包从此告别平庸，在人群中成为闪耀的焦点！
								<div class="circle"></div>
								</div>
							</div>
						</li>
						<li>
							<a href="son-3.html"><img src="img/170328142158409189.jpg" alt=""></a>
							<div class="girl-bag">
								<a href="son-3.html">《美女与野兽》推出迷你珍藏人偶套装</a>
								<div class="girl-bag-font">														舞会版贝儿人偶身着飘逸黄色公主裙，
								与Q版野兽迷你人偶翩翩起舞~
								<div class="circle"></div>
								</div>
							</div>
						</li>
					</ul>
					<div class="bottom-img-font clearfix" style="height: 296px;">
						<a href="son-4.html" class="fl" style="height: 296px;"><img src="img/160929164331220339.jpg" alt="" class="display:block"></a>
						<div class="right-img fl">
							<a href="son-4.html">乐高全新迪士尼系列现已上市，等你来收集！</a>
							<div class="right-img-font">
								不仅有18款迪士尼&皮克斯小人仔，还有还原度超高的灰姑娘城堡哦！
								<div class="circle"></div>
							</div>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
<!-- 页尾 -->
	<div class="center-box footer">
		<div class="middle-border clearfix">
			<div class="Disney-icon fl"><img src="img/b_logo.png" alt=""></div>
			<div class="wei fl">
				<ul>
					<li>
						<img src="img/weibo.jpg" alt="">
						<b>关注我们的微博</b>
					</li>
					<li>
						<img src="img/weixin.jpg" alt="">
						<b>关注我们的微信</b>
					</li>
				</ul>
			</div>
		</div>
		<div class="declare-font">
			<a href="">关于我们</a>
			<a href="">加入我们</a>
			<a href="">法律条款</a>
			<a href="">隐私政策</a>
			<a href="">退换货政策</a>
		</div>
		<p>
			Disney | Pixar All rights reserved. 备案号：沪ICP备07025394号-2
		</p>
	</div>

	<div id="vidBox">
		<video src="img/weibo.mp4" id="vid" controls></video>
		<a href="javascript:closeVid()"><img src="img/player_close.png" alt=""></a>
	</div>
	<div id="smalllable">
		<p>
		更多精彩商品<br>
		请莅临<a href="http://map.baidu.com/?newmap=1" style="color: #7c000f;">上海市浦东新区丰和路180号</a>迪士尼商店选购<br>
		您也可以登录<a href="https://disney.tmall.com/" style="color: #7c000f;">迪士尼商店天猫商城</a>选购
		</p>
		<a href="javascript:closeLable()"><img src="img/player_close2.png" alt=""></a>
	</div>
	<script>
		function showVid() {
		 	vidBox.style.display='block';
		 	black.style.display='block';
		 	vid.play();
		} 
		function closeVid() {
		 	vidBox.style.display='none';
		 	black.style.display='none';
		 	vid.pause();
		 	vid.currentTime = 0;
		}
		function showLable(){
			smalllable.style.display='block';
			black.style.display='block';
		}
		function closeLable(){
			smalllable.style.display='none';
			black.style.display='none';
		}
	</script>
</body>
</html>